import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, PixelRatio, TextInput } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import Utils from '../../../../utils/utils';
import { currency, saleTag, purchaseTag } from './common';

const scale = GLOBAL.SCALE;
export class ProductInfoItem extends Component {
	constructor(props) {
		super(props);
	}

	shouldComponentUpdate = (nextProps) => {
		if (Utils.deepCompare(this.props, nextProps)) return false;
		if (nextProps.isAdjust) {
			setTimeout(() => {
				this.input.focus();
			}, 300)
		}

		return true;
	}

	_downloadLayout = (e) => {
		let { getHeight } = this.props;
		getHeight && getHeight(e.nativeEvent.layout.y);
	}

	render() {
		const { data, delGoods, itemPress, tCode, isCreate, itemRightComponent, isAdjust, isEdit, isVatRateDutyRate, onChangeText } = this.props;
		const { item, index } = data || {};
		let priceTypeName = item.priceType == 2 ? '暂定价' : '一口价';
		let priceTypeStyle = item.priceType == 2 ?
			{ color: '#FA6400', backgroundColor: '#FBEFE8' }
			: { color: '#85C0EC', backgroundColor: '#ECF7FF' };
		return (
			<TouchableOpacity key={index} style={[styles.blockPadding, styles.xian]} onPress={() => {
				itemPress && itemPress(item, index)
			}}>
				<View style={styles.spaceBetween}>
					<View style={{ flexDirection: 'column', justifyContent: 'center', flex: 1 }}>
						<View style={[styles.spaceBetween, { paddingBottom: 10 * scale }]}>
							<Text style={styles.commonText}>{item.goodsName}</Text>
							{isCreate ? <Text style={styles.firstTitle} onPress={() => { delGoods && delGoods(index) }}>删</Text> : null}
						</View>
						<View style={[styles.spaceBetween, { paddingLeft: 5 * scale }]}>
							<View style={styles.priceTypeView}>
								{tCode === 'SINONEWC' ? <View style={{ marginRight: 13 * scale }}>{purchaseTag}</View> : null}
								<View>{currency(item.nakedPrice, '美金/吨')}</View>
								<Text style={[styles.productItemInfoTip, priceTypeStyle]}>{priceTypeName || ''}</Text>
							</View>
							<View style={{ flex: 1 }}>{currency(item.quantity, '吨')}</View>
						</View>
						{
							tCode === 'SINONEWC' ?
								<View style={[styles.spaceBetween, { height: 40 * scale, paddingLeft: 5 * scale }]}>
									<View style={styles.priceTypeView}>
										<View style={{ marginRight: 13 * scale, }}>{saleTag}</View>
										<View>{currency(item.nakedSalePrice, '美金/吨')}</View>
										<Text style={[styles.productItemInfoTip, priceTypeStyle]}>{priceTypeName || ''}</Text>
									</View>
								</View> : null
						}
						<View style={styles.productTipsView}>
							{item.udPrice && item.priceType == 2 ? <Text style={styles.productTips}>中新油合约价{item.udPrice > 0 ? `+${item.udPrice}` : item.udPrice}</Text> : null}
							{item.baseDateSettleName && item.priceType == 2 ? <Text style={styles.productTips}> | 基准日：{item.baseDateSettleName}</Text> : null}
							{(item.vatRate || item.vatRate == 0) && isVatRateDutyRate ? <Text style={styles.productTips}> | 增值税：{item.vatRate}%</Text> : null}
							{(item.dutyRate || item.dutyRate == 0) && isVatRateDutyRate ? <Text style={styles.productTips}> | 关税：{item.dutyRate}%</Text> : null}
							{item.makePlace ? <Text style={styles.productTips}> | 原产地：{item.makePlace}</Text> : null}
						</View>
						{(isAdjust || item.resv3) ?
							<View style={{ flexDirection: 'row', alignItems: 'center' }} onLayout={(e) => { this._downloadLayout(e) }} >
								<Text style={styles.inputKey}>结算价</Text>
								<TextInput ref={(e) => this.input = e}
									keyboardType='numeric'
									editable={isEdit}
									defaultValue={item.resv3}
									onChangeText={(text) => {
										item.resv3 = text;
										onChangeText && onChangeText(item, index);
									}}
									style={[styles.inputStyle, isEdit ? styles.inputBorder : null]}
								/>
							</View>
							: null}
					</View>
					{itemRightComponent ? itemRightComponent() : null}
				</View>
			</TouchableOpacity >
		)
	}
}
const styles = StyleSheet.create({
	blockPadding: {
		paddingLeft: 24 * scale,
		paddingRight: 24.5 * scale,
		paddingTop: 12 * scale,
		paddingBottom: 12 * scale,

	},
	spaceBetween: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	firstTitle: {
		fontSize: 14 * scale,
		fontWeight: 'bold',
		color: '#0E7FFD',
		textAlign: 'right'
	},
	productItemInfoTip: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
		color: style.color.orange,
		backgroundColor: '#fbefe8',
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		paddingLeft: 6 * scale,
		paddingRight: 6 * scale,
		marginLeft: 8 * scale,
		borderRadius: 6 * scale
	},
	commonText: {
		fontSize: 14 * scale,
		fontWeight: '700'
	},
	rightIcon: {
		tintColor: style.color.themeColor
	},
	priceTypeView: {
		flex: 2,
		flexDirection: 'row',
		justifyContent: 'flex-start'
	},
	xian: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	},
	productTipsView: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
		padding: 5 * scale
	},
	productTips: {
		fontSize: 11 * scale
	},
	inputKey: {
		width: 75 * scale,
		// marginLeft: 24 * scale,
		height: 30 * scale,
		lineHeight: 30 * scale,
		textAlign: 'left',
		// marginRight: 30 * scale,
		fontSize: 14 * scale,
		paddingLeft: 0 * scale,
		color: '#000000'
	},
	inputStyle: {
		height: 25 * scale,
		width: 120 * scale,
		paddingRight: 5 * scale,
		fontSize: 14 * scale,
		fontWeight: 'bold',
		color: '#000',
		paddingVertical: 0
	},
	inputBorder: {
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: '#0E7FFD',
		paddingLeft: 5 * scale
	}
})